import React from 'react';
import { useAuth } from '../contexts/AuthContext';
import './Dashboard.css';

const Dashboard: React.FC = () => {
  const { user, logout } = useAuth();

  const handleLogout = async () => {
    try {
      await logout();
    } catch (error) {
      console.error('登出失败:', error);
    }
  };

  if (!user) {
    return <div className="loading">加载中...</div>;
  }

  return (
    <div className="dashboard-container">
      <header className="dashboard-header">
        <div className="header-content">
          <h1>用户中心</h1>
          <button onClick={handleLogout} className="logout-button">
            登出
          </button>
        </div>
      </header>

      <main className="dashboard-main">
        <div className="user-info-card">
          <div className="user-avatar">
            <img src={user.avatar || '/default-avatar.png'} alt="用户头像" />
          </div>
          <div className="user-details">
            <h2>欢迎回来，{user.nickname || user.username}！</h2>
            <div className="info-grid">
              <div className="info-item">
                <span className="label">用户名：</span>
                <span className="value">{user.username}</span>
              </div>
              <div className="info-item">
                <span className="label">昵称：</span>
                <span className="value">{user.nickname || '未设置'}</span>
              </div>
              <div className="info-item">
                <span className="label">邮箱：</span>
                <span className="value">{user.email || '未设置'}</span>
              </div>
              <div className="info-item">
                <span className="label">手机：</span>
                <span className="value">{user.phone || '未设置'}</span>
              </div>
              <div className="info-item">
                <span className="label">状态：</span>
                <span className={`status ${user.status === 1 ? 'active' : 'inactive'}`}>
                  {user.status === 1 ? '正常' : '禁用'}
                </span>
              </div>
              <div className="info-item">
                <span className="label">角色：</span>
                <span className="value">
                  {user.roles && user.roles.length > 0 ? (
                    <div className="roles">
                      {user.roles.map((role, index) => (
                        <span key={index} className="role-badge">
                          {role === 'ADMIN' ? '管理员' : role === 'USER' ? '普通用户' : role}
                        </span>
                      ))}
                    </div>
                  ) : (
                    '无角色'
                  )}
                </span>
              </div>
              <div className="info-item">
                <span className="label">注册时间：</span>
                <span className="value">
                  {user.createTime ? new Date(user.createTime).toLocaleString('zh-CN') : '未知'}
                </span>
              </div>
              <div className="info-item">
                <span className="label">最后登录：</span>
                <span className="value">
                  {user.lastLoginTime ? new Date(user.lastLoginTime).toLocaleString('zh-CN') : '首次登录'}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="features-section">
          <h3>功能特性</h3>
          <div className="features-grid">
            <div className="feature-card">
              <div className="feature-icon">🔐</div>
              <h4>安全认证</h4>
              <p>基于Sa-Token的JWT认证机制，保障账户安全</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">👤</div>
              <h4>用户管理</h4>
              <p>完整的用户注册、登录、权限管理功能</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">🚀</div>
              <h4>技术栈</h4>
              <p>Java17 + SpringBoot3 + Sa-Token + React</p>
            </div>
            <div className="feature-card">
              <div className="feature-icon">📱</div>
              <h4>响应式设计</h4>
              <p>适配各种设备，提供优秀的用户体验</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Dashboard;